import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin, Row, Col, Card, Button, Table, Divider, message,Popconfirm} from 'antd';
import HeaderTab from '@/components/HeaderTab';
import router from 'umi/router';
import styles from './expresslist.less';

class expresslist extends Component {
    state={
        loaded:true,
        paginationProps: {
            showSizeChanger: true,
            showQuickJumper: false,
            showTotal: total => `共 ${total} 条记录`,
            pageSize: 10,
            total: 0,
            current: 1,
        },
        tabs: [
            {
              title: '快递发货',
              key: `/${window.storeId}/delivery/express`,
              // disabled: true
            },
            {
              title: '快递单模板',
              key: `/${window.storeId}/delivery/expressbilltemplate/list`,
            },
            {
              title: '物流公司',
              key: `/${window.storeId}/delivery/logistics`,
            },
            // {
            //   title: '物流查询',
            //   key: `/${window.storeId}/delivery/logisticsInquiry`,
            // },
          ],
    }

    componentDidMount(){
        this.getList();
        window.Isoption = true;
    }
   
    componentWillMount() {
        window.Isoption = false;
      }


    // 获取列表数据
    getList = (param) => {
        const { dispatch } = this.props;
        dispatch({
            type:'expressBill/GetList',
            param:{
                PageSize:param&&param.pageSize?param.pageSize:10,
                PageIndex:param&&param.pageIndex?param.pageIndex:1
            },
            callback:{
                success:(data)=>{
                    const { paginationProps } = this.state;
                    paginationProps.total = data.Data.Total||0;
                    this.setState({
                        loaded:false,
                        paginationProps,
                    })
                }
            }
        })
    }

    // 头部标签页切换
    onTabChange = id => {
        this.setState(
        {
            activeId: id,
        },
        () => {
            router.replace({
            pathname: `${id}`,
            });      
        }
        );
    };
     
    addExpressBill = () =>{
        router.push({
            pathname: `/${window.storeId}/delivery/expressbilltemplate/add`,
        }); 
    }

    gonEdit = (id) => {
        router.push({
            pathname: `/${window.storeId}/delivery/expressbilltemplate/edit/${id}`,
        }); 
    }

    // 删除
    delete = (id) =>{
        const { dispatch } = this.props;        
        dispatch({
            type:'expressBill/DelPrintTpl',
            param:{
                Id:id
            },
            callback:{
                success:()=>{
                    message.success('删除成功');
                    this.getList();
                }
            }
        })
    }


    // 表格change
    tableChange = (pagination) => {
        console.log(pagination)
        this.getList({
            pageIndex:pagination.current,
            pageSize:pagination.pageSize
        })
    }


    render() {
        const {expressBillList,loading} = this.props;
        const { loaded , paginationProps } = this.state;
        console.log(expressBillList)
        const columns = [
          {
            title: '模板名称',
            dataIndex: 'TempLateName',            
          }, {
            title: '物流公司',
            dataIndex: 'ExpressName',
            width:'30%',
          }, {
            title: '操作',
            dataIndex: 'address',
            width:'20%',
            align:'right',
            render:(text,record)=>(
                <div>
                    <a href="javascript:void(0);" onClick={()=>this.gonEdit(record.Id)}>编辑</a>                  
                    <Divider type="vertical"/>
                    <Popconfirm placement="topRight" title={'确认删除？'} onConfirm={()=>this.delete(record.Id)} okText="确认" cancelText="取消">
                        <a href="javascript:void(0);">删除</a>
                    </Popconfirm>                      
                </div>
            )
          }
        ];        
        return (
            <Fragment>
                {/* <HeaderTab
                _this={this}
                type="slider"
                activeId={this.state.activeId}
                onChange={this.onTabChange}
                tabs={this.state.tabs}
                > 
                </HeaderTab> */}
                <Spin spinning={loaded}>
                    <Card
                        bordered={false}
                        className={styles.Expresslist}
                    >
                        <Row style={{marginBottom:16}}>
                            <Col>
                                <Button type="primary" onClick={this.addExpressBill}>新建快递单模板</Button>
                            </Col>
                        </Row>
                        <Table 
                            rowKey={record=>record.Id}
                            loading={loading}
                            dataSource={expressBillList} 
                            columns={columns}
                            pagination={paginationProps}
                            onChange={this.tableChange}
                        />
                    </Card>
                </Spin>
            </Fragment>
        );
    }
}
export default connect(({ expressBill, loading }) => ({
    expressBillList: expressBill.expressBillList,    
    loading: loading.effects['expressBill/GetList'],
}))(expresslist);
